<template>
  <a-modal
    :title="title"
    :width="1024"
    :visible="visible"
    :confirmLoading="confirmLoading"
    @ok="handleOk"
    @cancel="handleCancel"
    cancelText="关闭">
    
    <a-spin :spinning="confirmLoading">
      <a-form :form="form">

          <!-- 主表单区域 -->
        <#assign x=0 />
        <#list formList as po> <#rt/>
        <#if x%viewModule.viewMaincols?number =0>
        <a-row></#if>
        <#assign x=x+1 />
        <a-col :span="${24/viewModule.viewMaincols?number}">
          <a-form-item
            :labelCol="labelCol"
            :wrapperCol="wrapperCol"
            :selfUpdate="true"
            label="${po.uiFieldcomment}">
            <#if po.uiUitype =='7'>
              <a-date-picker style="width: 100%" showTime <#if po.uiOnlyread =='true'> disabled </#if> format='YYYY-MM-DD HH:mm:ss' v-decorator="[ '${po.fieldName}', <#if po.uiNotnull =='true'||(po.uiDefaultvalue !=''&&po.uiDefaultvalue !='#date'&&po.uiDefaultvalue !='#user'&&po.uiDefaultvalue !='#orgCode')>validatorRules.${po.fieldName} <#else>{}</#if>]" />
            <#elseif po.uiUitype =='1'>
              <j-dict-select-tag :triggerChange="true" <#if po.uiOnlyread =='true'> disabled </#if> dictCode="${po.uiSelectfunc}" v-decorator="[ '${po.fieldName}', <#if po.uiNotnull =='true'||po.uiDefaultvalue !=''>validatorRules.${po.fieldName} <#else>{}</#if>]">
              </j-dict-select-tag>
            <#elseif po.uiUitype =='4'>
              <a-input-number style="width: 100%" <#if po.uiOnlyread =='true'> disabled </#if> v-decorator="[ '${po.fieldName}', <#if po.uiNotnull =='true'||po.uiDefaultvalue !=''>validatorRules.${po.fieldName} <#else>{}</#if>]" />
            <#elseif po.uiUitype =='5'>
              <a-textarea <#if po.uiOnlyread =='true'> disabled </#if> v-decorator="[ '${po.fieldName}', <#if po.uiNotnull =='true'||po.uiDefaultvalue !=''>validatorRules.${po.fieldName} <#else>{}</#if>]" :autoSize="{ minRows: 2, maxRows: 4 }"/>
            <#elseif po.uiUitype =='6'>
                <j-search-select
                        v-decorator="[ '${po.fieldName}', <#if po.uiNotnull =='true'||po.uiDefaultvalue !=''>validatorRules.${po.fieldName} <#else>{}</#if>]"
                        dict="${po.uiSelectfunc}"
                        :async="true">
                </j-search-select>
            <#elseif po.uiUitype =='2'>
                <a-date-picker style="width: 100%" <#if po.uiOnlyread =='true'> disabled </#if> format='YYYY-MM-DD' v-decorator="[ '${po.fieldName}', <#if po.uiNotnull =='true'||(po.uiDefaultvalue !=''&&po.uiDefaultvalue !='#date'&&po.uiDefaultvalue !='#user'&&po.uiDefaultvalue !='#orgCode')>validatorRules.${po.fieldName} <#else>{}</#if>]" />

            <#else>
              <a-input <#if po.uiOnlyread =='true'> disabled </#if>  v-decorator="['${po.fieldName}', <#if po.uiNotnull =='true'||po.uiDefaultvalue !=''>validatorRules.${po.fieldName} <#else>{}</#if>]" />
            </#if>
          </a-form-item>
        </a-col>
         <#if x%viewModule.viewMaincols?number =0></a-row></#if>
        </#list>
        <#if formList?size % viewModule.viewMaincols?number !=0 ></a-row></#if>
         

          <!-- 子表单区域 -->
          <a-tabs defaultActiveKey="0" >
              <#list detailedTable as sub>
                  <a-tab-pane tab="${sub}" key="${sub_index}" :forceRender="true">
                      <div class="TableTile">
                          <a-row type="flex" class="TableRow" style="margin-bottom:10px">
                              <#list allColumns as po>
                                  <#if po.uiTable?replace("_"," ")?capitalize?replace(" ","")=='${sub}' && po.uiForm=='true'>
                              <div <#if po.uiNotnull =='true'|| po.uiDefaultvalue !=''>class="addRedStar"</#if> style="width:150px"  >${po.uiFieldcomment}</div>
                                  </#if>
                              </#list>
                              <a-col style="width:180px">操作</a-col>
                          </a-row>

                          <a-row type="flex" class="TableRow" style="margin-bottom:10px" v-for="(item, index) in ${entityName?uncap_first}MainModel.${sub?uncap_first}List" :key="index">
                              <#list allColumns as po>
                                  <#if po.uiTable?replace("_"," ")?capitalize?replace(" ","")=='${sub}' && po.uiForm=='true'>
                                      <a-col>
                                          <a-form-item :selfUpdate="true">
                                              <#if po.uiUitype =='7'>
                                                  <a-date-picker style="width: 150px" showTime <#if po.uiOnlyread =='true'> disabled </#if> format='YYYY-MM-DD HH:mm:ss' v-decorator="[ '${sub?uncap_first}List['+index+'].${po.fieldName}', { 'initialValue':item.${po.fieldName},<#if po.uiNotnull =='true'> rules: [{ required: true, message: '请输入${po.uiFieldcomment}!' ,<#if po.uiExpression !=''>pattern:${po.uiExpression} </#if>}]</#if>} ]" />
                                              <#elseif po.uiUitype =='1'>
                                                  <j-dict-select-tag style="width: 150px" :triggerChange="true" <#if po.uiOnlyread =='true'> disabled </#if> dictCode="${po.uiSelectfunc}" v-decorator="[ '${sub?uncap_first}List['+index+'].${po.fieldName}', { 'initialValue':item.${po.fieldName},<#if po.uiNotnull =='true'> rules: [{ required: true, message: '请输入${po.uiFieldcomment}!' ,<#if po.uiExpression !=''>pattern:${po.uiExpression} </#if>}]</#if>} ]">
                                                  </j-dict-select-tag>
                                              <#elseif po.uiUitype =='4'>
                                                  <a-input-number style="width: 150px" <#if po.uiOnlyread =='true'> disabled </#if> v-decorator="[ '${sub?uncap_first}List['+index+'].${po.fieldName}', { 'initialValue':item.${po.fieldName},<#if po.uiNotnull =='true'> rules: [{ required: true, message: '请输入${po.uiFieldcomment}!' ,<#if po.uiExpression !=''>pattern:${po.uiExpression} </#if>}]</#if>} ]" />
                                              <#elseif po.uiUitype =='5'>
                                                  <a-textarea style="width: 150px" <#if po.uiOnlyread =='true'> disabled </#if> v-decorator="[ '${sub?uncap_first}List['+index+'].${po.fieldName}', { 'initialValue':item.${po.fieldName},<#if po.uiNotnull =='true'> rules: [{ required: true, message: '请输入${po.uiFieldcomment}!' ,<#if po.uiExpression !=''>pattern:${po.uiExpression} </#if>}]</#if>}]" :autoSize="{ minRows: 2, maxRows: 4 }"/>
                                              <#elseif po.uiUitype =='6'>
                                                  <j-search-select style="width: 150px"
                                                          v-decorator="[ '${sub?uncap_first}List['+index+'].${po.fieldName}', { 'initialValue':item.${po.fieldName},<#if po.uiNotnull =='true'> rules: [{ required: true, message: '请输入${po.uiFieldcomment}!' ,<#if po.uiExpression !=''>pattern:${po.uiExpression} </#if>}]</#if>} ]"
                                                          dict="${po.uiSelectfunc}"
                                                          :async="true">
                                                  </j-search-select>
                                              <#elseif po.uiUitype =='2'>
                                                  <a-date-picker style="width: 150px" <#if po.uiOnlyread =='true'> disabled </#if> format='YYYY-MM-DD' v-decorator="[ '${sub?uncap_first}List['+index+'].${po.fieldName}', { 'initialValue':item.${po.fieldName},<#if po.uiNotnull =='true'> rules: [{ required: true, message: '请输入${po.uiFieldcomment}!' ,<#if po.uiExpression !=''>pattern:${po.uiExpression} </#if>}]</#if>} ]" />

                                              <#else>
                                                  <a-input style="width: 150px" <#if po.uiOnlyread =='true'> disabled </#if>  v-decorator="['${sub?uncap_first}List['+index+'].${po.fieldName}', { 'initialValue':item.${po.fieldName},<#if po.uiNotnull =='true'> rules: [{ required: true, message: '请输入${po.uiFieldcomment}!' ,<#if po.uiExpression !=''>pattern:${po.uiExpression} </#if>}]</#if>} ]" />
                                              </#if>
                                          </a-form-item>
                                      </a-col>
                                  </#if>
                              </#list>
                              <a-col style="width:180px">
                                  <a-form-item>
                                      <a-button @click="addRow${sub}" icon="plus"></a-button>&nbsp;
                                      <a-button @click="delRow${sub}(index)" icon="minus"></a-button>
                                  </a-form-item>
                              </a-col>
                          </a-row>
                      </div>
                  </a-tab-pane>
              </#list>

          </a-tabs>


      </a-form>
    </a-spin>
  </a-modal>
</template>

<script>
  import { httpAction,getAction,postAction } from '@/api/manage'
  import pick from 'lodash.pick'
  import moment from "moment"
  import { mapActions, mapGetters } from 'vuex'
  <#list formList as po>
  <#if po.uiUitype =='6'>
  import JSearchSelect from '@/components/dict/JSearchSelect'
  <#break>
  </#if>
  </#list>


  export default {
    name: "${entityName}Modal",
  <#list formList as po>
  <#if po.uiUitype =='6'>
  components: { JSearchSelect },
  <#break>
  </#if>
  </#list>
    data () {
      return {
        title:"操作",
        visible: false,
        ${entityName?uncap_first}MainModel: {
        <#list detailedTable as sub>
            ${sub?uncap_first}List: [{}]<#if sub_has_next>,</#if>
        </#list>
        },

        labelCol: {
          xs: { span: 24 },
          sm: { span: 5 },
        },
        wrapperCol: {
          xs: { span: 24 },
          sm: { span: 16 },
        },

        confirmLoading: false,
        form: this.$form.createForm(this),
        validatorRules:{
        <#list allColumns as po>
          <#if po.uiForm =='true' && po.isDetailed =='0'>
            <#if po.uiNotnull =='true'||(po.uiDefaultvalue !=''&&po.uiDefaultvalue !='#date'&&po.uiDefaultvalue !='#user'&&po.uiDefaultvalue !='#orgCode')>
            ${po.fieldName}:{<#if po.uiNotnull =='true'> rules: [{ required: true, message: '请输入${po.uiFieldcomment}!' ,<#if po.uiExpression !=''>pattern:${po.uiExpression} </#if>}],</#if>
                  <#if po.uiDefaultvalue !=''&&po.uiDefaultvalue !='#date'&&po.uiDefaultvalue !='#user'&&po.uiDefaultvalue !='#orgCode'>initialValue: '${po.uiDefaultvalue}'</#if>},
            </#if>
          </#if>
	    </#list>
        },
        url: {
          add: "/${entityName?uncap_first}/add",
          edit: "/${entityName?uncap_first}/edit",
        <#list detailedTable as sub>
         ${sub?uncap_first}List: "/${entityName?uncap_first}/query${sub}ByMainId",
        </#list>
        },
      }
    },
    created () {
    },
    methods: {
      moment,
      //获取当前登录人信息
      ...mapGetters(["userInfo"]),

      add () {
        this.edit({
        <#list originalColumns as po>
        <#if po.uiDefaultvalue =='#user'>${ po.fieldName }:this.userInfo().realname,
        <#elseif po.uiDefaultvalue =='#orgCode'>${ po.fieldName }:this.userInfo().orgCode,
        <#elseif po.uiDefaultvalue =='#date'>${ po.fieldName }:moment(),
        </#if>
        </#list>
      });
      },
      edit (record) {
        this.form.resetFields();
        this.${entityName?uncap_first}MainModel = Object.assign({}, record);
        <#list detailedTable as sub>
        this.${entityName?uncap_first}MainModel.${sub?uncap_first}List = [{}];
        </#list>
        //初始化明细表数据
        if(this.${entityName?uncap_first}MainModel.id){
          let params = {id:this.${entityName?uncap_first}MainModel.id}
          <#list detailedTable as sub>
          //初始化
          getAction(this.url.${sub?uncap_first}List,params).then((res)=>{
              if(res.success){
                  this.${entityName?uncap_first}MainModel.${sub?uncap_first}List = res.result;
                  this.$forceUpdate()
              }
          })
          </#list>
        }
        this.visible = true;
        this.$nextTick(() => {
          this.form.setFieldsValue(pick(this.${entityName?uncap_first}MainModel<#list originalColumns as po><#if po.fieldName !='id' && po.uiForm ='true' && po.uiFieldtype?index_of("DATETIME")==-1>,'${po.fieldName}'</#if></#list>))
		  //时间格式化
          <#list originalColumns as po>
          <#if po.fieldName !='id' && po.uiForm ='true' && (po.uiFieldtype?index_of("DATETIME")!=-1||po.uiFieldtype?index_of("DATE")!=-1)>
          this.form.setFieldsValue({${po.fieldName}:this.${entityName?uncap_first}MainModel.${po.fieldName}?moment(this.${entityName?uncap_first}MainModel${po.fieldName}):null})
          </#if>
          </#list>
        });

      },
      close () {
        this.$emit('close');
        this.visible = false;
      },
      handleOk () {
        const that = this;
        // 触发表单验证
        this.form.validateFields((err, values) => {
          if (!err) {
            that.confirmLoading = true;
            let httpurl = '';
            let method = '';
            if(!this.${entityName?uncap_first}MainModel.id){
              httpurl+=this.url.add;
              method = 'post';
            }else{
              httpurl+=this.url.edit;
               method = 'put';
            }
            let ${entityName?uncap_first}MainData = Object.assign(this.${entityName?uncap_first}MainModel, values);
            //时间格式化
            <#list originalColumns as po>
            <#if po.fieldName !='id' && po.uiForm ='true' && po.uiFieldtype?index_of("DATETIME")!=-1>
              ${entityName?uncap_first}MainData.${po.fieldName} = ${entityName?uncap_first}MainData.${po.fieldName}?${entityName?uncap_first}MainData.${po.fieldName}.format('YYYY-MM-DD HH:mm:ss'):null;
            <#elseif po.fieldName !='id' && po.uiForm ='true' && po.uiFieldtype?index_of("DATE")!=-1>
              ${entityName?uncap_first}MainData.${po.fieldName} = ${entityName?uncap_first}MainData.${po.fieldName}?${entityName?uncap_first}MainData .${po.fieldName}.format('YYYY-MM-DD'):null;
            </#if>
            </#list>
              let formData = {
                  ...${entityName?uncap_first}MainData,
                  <#list detailedTable as sub>
                  ${sub?uncap_first}List: ${entityName?uncap_first}MainData.${sub?uncap_first}List,
                  </#list>

              }
            console.log(formData)
            httpAction(httpurl,formData,method).then((res)=>{
              if(res.success){
                that.$message.success(res.message);
                that.$emit('ok');
              }else{
                that.$message.warning(res.message);
              }
            }).finally(() => {
              that.confirmLoading = false;
              that.close();
            })
          }
        })
      },
      handleCancel () {
        this.close()
      },
    <#list detailedTable as sub>
    addRow${sub}() {
        this.${entityName?uncap_first}MainModel.${sub?uncap_first}List.push({});
        this.$forceUpdate();
    },
    delRow${sub} (index) {
        console.log(index)
        this.${entityName?uncap_first}MainModel.${sub?uncap_first}List.splice(index,1);
        this.$forceUpdate();
    },

    </#list>



    }
  }
</script>

<style>
    .TableTile {
        height: 300px;
        width: 1024px;
        overflow: auto;
        background: #EEEEEE;
    }

    .TableRow {
        margin-bottom: 10px;
        width: 2024px;
        text-align: center;
    }

    .addRedStar:after {
        content: '*';
        color: red;
        font-size: 18px;
    }
</style>

